import React from 'react';
import Api from 'Utils/api';
import dialog from 'Utils/dialog';
import Artical from 'Page/CommonComponents/Article';
import { RESOURCE_HOST } from 'Constants/config';
import './../interactive.scss';

class SpeakDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      content: {}
    }
  }
  componentWillMount() {
    this.getSpeak();
  }
  getSpeak() {
    const api = new Api({
      method: 'GET',
      path: `/suggests/user/${this.state.id}`,
      success: (json) => {
        this.setState({
          content: json
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  renderVideo(content) {
    if (content.media_type === 'video') {
      return (
        <video controls preload autoPlay className="video" src={`${RESOURCE_HOST}mobile/${content.type}`}>
        </video>
      );
    } else if (content.media_type === 'audio') {
      return (
        <audio controls className="audio" src={`${RESOURCE_HOST}${content.type}`}>
        </audio>
      );
    }
    return '';
  }
  render() {
    const { content } = this.state;
    return (
      <div className="speak-detail-page">
        <Artical
          title={content.title || ''}
          createTime={content.create_time || ''}
          favor={content.total_like ? parseInt(content.total_like, 10) : -1}
          favorPath={`/suggests/user/like/${this.state.id}`}
          desc={
            <div className="speak-content-wrap">
              <div className="media-wrap">
                {
                  content.media_type ? this.renderVideo(content) : ''
                }
              </div>
              <div className="content-wrap">
                {content.content ? <span dangerouslySetInnerHTML={{ __html: content.content.replace(/\n/g, '<br/>') }} /> : ''}
              </div>
            </div>
          }
        />
      </div>
    )
  }
}

export default SpeakDetail;
